<section [formGroup]="toEmailConfigForm" fxLayout="column">
  <mat-form-field class="mat-block" style="padding-bottom: 16px;">
    <mat-label translate>tb.rulenode.from-template</mat-label>
    <textarea required matInput formControlName="fromTemplate" rows="2"></textarea>
    <mat-error *ngIf="toEmailConfigForm.get('fromTemplate').hasError('required')">
      {{ 'tb.rulenode.from-template-required' | translate }}
    </mat-error>
    <mat-hint [innerHTML]="'tb.rulenode.general-pattern-hint' | translate | safeHtml"></mat-hint>
  </mat-form-field>
  <mat-form-field class="mat-block" style="padding-bottom: 16px;">
    <mat-label translate>tb.rulenode.to-template</mat-label>
    <textarea required matInput formControlName="toTemplate" rows="2"></textarea>
    <mat-error *ngIf="toEmailConfigForm.get('toTemplate').hasError('required')">
      {{ 'tb.rulenode.to-template-required' | translate }}
    </mat-error>
    <mat-hint [innerHTML]="'tb.rulenode.mail-address-list-template-hint' | translate | safeHtml"></mat-hint>
  </mat-form-field>
  <mat-form-field class="mat-block" style="padding-bottom: 24px;">
    <mat-label translate>tb.rulenode.cc-template</mat-label>
    <textarea matInput formControlName="ccTemplate" rows="2"></textarea>
    <mat-hint [innerHTML]="'tb.rulenode.mail-address-list-template-hint' | translate | safeHtml"></mat-hint>
  </mat-form-field>
  <mat-form-field class="mat-block" style="padding-bottom: 24px;">
    <mat-label translate>tb.rulenode.bcc-template</mat-label>
    <textarea matInput formControlName="bccTemplate" rows="2"></textarea>
    <mat-hint [innerHTML]="'tb.rulenode.mail-address-list-template-hint' | translate | safeHtml"></mat-hint>
  </mat-form-field>
  <mat-form-field class="mat-block" style="padding-bottom: 24px;">
    <mat-label translate>tb.rulenode.subject-template</mat-label>
    <textarea required matInput formControlName="subjectTemplate" rows="2"></textarea>
    <mat-error *ngIf="toEmailConfigForm.get('subjectTemplate').hasError('required')">
      {{ 'tb.rulenode.subject-template-required' | translate }}
    </mat-error>
    <mat-hint [innerHTML]="'tb.rulenode.general-pattern-hint' | translate | safeHtml"></mat-hint>
  </mat-form-field>
  <mat-form-field class="mat-block">
    <mat-label translate>tb.rulenode.mail-body-type</mat-label>
    <mat-select formControlName="mailBodyType">
      <mat-option *ngFor="let type of mailBodyTypes" [value]="type.value">
        {{ type.name | translate }}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field class="mat-block" *ngIf="toEmailConfigForm.get('mailBodyType').value === 'dynamic'" style="padding-bottom: 16px;">
    <mat-label translate>tb.rulenode.dynamic-mail-body-type</mat-label>
    <input required matInput formControlName="isHtmlTemplate">
    <mat-hint [innerHTML]="'tb.rulenode.general-pattern-hint' | translate | safeHtml"></mat-hint>
  </mat-form-field>
  <mat-form-field class="mat-block" style="padding-bottom: 16px;">
    <mat-label translate>tb.rulenode.body-template</mat-label>
    <textarea required matInput formControlName="bodyTemplate" rows="6"></textarea>
    <mat-error *ngIf="toEmailConfigForm.get('bodyTemplate').hasError('required')">
      {{ 'tb.rulenode.body-template-required' | translate }}
    </mat-error>
    <mat-hint [innerHTML]="'tb.rulenode.general-pattern-hint' | translate | safeHtml"></mat-hint>
  </mat-form-field>
</section>
